<style scoped>
    .page-redpack{
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
        background: #ebebeb;
    }

    .redpack-banner{
        width:100%;
        position: relative;
    }

    .redpack-banner img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .redpack-time{
        width:100%;
        display: -webkit-flex;
        flex-direction:row;
        -webkit-flex-direction:row;
        justify-content: center;
        -webkit-justify-content: center;
        align-items:center;
        -webkit-align-items:center;
        height:0.5rem
    }

    .redpack-countdown-fixed{
        position: fixed;
        left:0;
        top:0;
        background: #ffffff;
        z-index:3;
    }

    .redpack-time li{
        flex-grow:1;
        height:100%;

    }

    .redpack-time li a{
        width:100%;
        height:100%;
        display: -webkit-flex;
        flex-direction:column;
        -webkit-flex-direction:column;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        background: #343434;
        color: #878787;

    }

    .redpack-time li span{
        display: inline-block;
        width:100%;
        text-align: center;
    }

    .redpack-time li span:nth-child(1){
        font-size: 0.19rem;
        height: 0.24rem;
        line-height: 0.24rem;
        font-weight:bold;
    }

    .redpack-time li span:nth-child(2){
        font-size: 0.12rem;

    }

    .redpack-time .active a{
        background: #f93f49;
        color: #ffffff;
    }




    .redpack-countdown{
        width:100%;
        height:0.5rem;
        display: -webkit-flex;
        flex-direction:row;
        -webkit-flex-direction:row;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        color: #818181;
        font-size: 0.14rem;
        -webkit-transition: all .5s linear;
        -moz-transition: all .5s linear;
        -ms-transition: all .5s linear;
        -o-transition: all .5s linear;
        transition: all .5s linear;
    }

    .redpack-countdown span{
        position: relative;
        margin:0 0.02rem;
        width:0.17rem;
        height:0.19rem;
        border-radius:0.03rem;
        background: #5e5e5e;
        color: #ffffff;
        line-height:0.18rem;
        text-align: center;
    }

    /*.redpack-countdown span:nth-child(2):before,.redpack-countdown span:nth-child(4):before{*/
    /*content:':';*/
    /*position: absolute;*/
    /*left:100%;*/
    /*top:0;*/

    /*}*/

    .redpack-ruleBtn{
        position: absolute;
        bottom:0.05rem;
        left:50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width:0.95rem;
        height: 0.23rem;
        border-radius:0.3rem;
        background: #fff10e;
        text-align: center;
        line-height:0.23rem;
        color: #b11616;
        font-size:0.12rem;
        z-index:2;
    }

    .redpack-container{
        width:100%;
        padding-bottom: 0.12rem;
    }




    /*  锟斤拷锟窖猴拷锟斤拷模锟斤拷 style  */

    .free_redpackets {
        position: relative;
        width: 3.3579rem;
        height: 1.404rem;
        background: #fff;
        border-radius: 0.08rem;
        margin: 0 auto 0.12rem auto;
    }
    .free_redpackets .free_redpackets_wrap {
        height: 100%;
        margin: 0 0.117rem;
        color: #ebebeb;
        position: relative;
    }
    .free_redpackets .free_redpackets_wrap::before,.free_redpackets_wrap::after {
        display: block;
        content: '';
        position: absolute;
        top: 0.2rem;
        width: 0.0936rem;
        height: 0.0936rem;
        border-radius: 50%;
        background: currentColor;
    }
    .free_redpackets .free_redpackets_wrap::before {
        left: -0.14rem;
    }
    .free_redpackets .free_redpackets_wrap::after {
        right: -0.14rem;
    }
    .free_redpackets .redpackets_top {
        padding: 0 0.05rem;
        height: 0.2925rem;
        line-height: 0.2925rem;
        color: #585858;
        border-bottom: 1px dashed #ebebeb;
        letter-spacing: 1px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        font-size: 0.117rem;
    }
    .free_redpackets .redpackets_top::after {
        content:".";
        display:block;
        height:0;
        clear: both;
        visibility:hidden
    }
    .free_redpackets .redpackets_top .top_title {
        float: left;
    }
    .free_redpackets .redpackets_top .top_number {
        float: right;
    }

    .free_redpackets .redpackets_main {
        height: calc(100% - 0.2925rem);
        position: relative;
        padding-top: 0.13rem;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        color: #343434;
    }
    .free_redpackets .redpackets_main > .left {
        width: 0.9945rem;
        height: 0.909rem;
        position: absolute;
        margin-left: 0.05rem;
        bottom: 0;
        background: url("https://img.alicdn.com/imgextra/i3/1876943437/TB2KoSJn.dnpuFjSZPhXXbChpXa_!!1876943437.png") no-repeat top center / cover;
    }

    .free_redpackets .redpackets_main > .left img {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
    }
    .free_redpackets .redpackets_main > .right {
        width: 56%;
        height: calc(100% - 0.13rem);
        height: -webkit-calc(100% - 0.13rem);
        position: absolute;
        right: 0;
    }
    .free_redpackets .redpackets_main .right_wrap {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .free_redpackets .redpackets_main > .right .main_price {
        position: absolute;
        left: 0;
        line-height: 0.45rem;
        font-size: 0.28rem;
        max-width: 0.9rem;
        font-weight: bold;
    }
    .free_redpackets .redpackets_main > .right .main_title {
        position: absolute;
        right: 0;
        line-height: 0.5rem;
        font-size: 0.2rem;
        padding-left: 0.09rem;
        font-weight: bold;
    }
    .free_redpackets .main_jindu {
        width: 0.62rem;
        position: absolute;
        bottom: 0.12rem;
        left: 0;
    }
    .free_redpackets .main_jindu .txt {
        margin-bottom: 0.02rem;
        font-size: 0.14rem;
        color: #999999;
        transform: scale(0.8);
        transform-origin: left;
        white-space: nowrap;
    }
    .free_redpackets .main_jindu .wrap {
        position: relative;
        margin-bottom: 1px;
        height: 0.03rem;
        -webkit-border-radius: 0.03rem;
        border-radius: 0.03rem;
        background-color: #efeeee;
        overflow: hidden;
    }
    .free_redpackets .main_jindu .wrap .bar {
        display: block;
        width: 0;
        height: 100%;
        transition: width .5s ease-in;
    }
    .free_redpackets .main_jindu .wrap .bar .color {
        display: block;
        width: 100%;
        height: 100%;
        background: #f93f49;
        background: -ms-linear-gradient(left, #FFCB3D, #f93f49);
        background: -webkit-linear-gradient(left, #FFCB3D, #f93f49);

    }
    .free_redpackets .main_btn {
        display: block;
        width: 0.76015rem;
        height: 0.2223rem;
        line-height: 0.2223rem;
        text-align: center;
        position: absolute;
        bottom: 0.14rem;
        right: 0;
        border-radius: 0.09rem;
        font-size: 0.1053rem;
        padding: 0 0.02rem;
    }

    .free_redpackets .buyBtn_theme_2{
        background: #909090;
        color: #fff;
    }
    .free_redpackets .buyBtn_theme_3{
        background: #5e5e5e;
        color: #fff;
    }
    .free_redpackets .buyBtn_theme_1{
        background: #f93f49;
        color: #fff;
    }

    .mask_cantBuy:before{
        width:100%;
        height:100%;
        position: absolute;
        content: '';
        background: rgba(148,148,148,.5);
        border-radius: 0.08rem;
        z-index: 9;
    }



    /*  锟筋动锟斤拷锟津弹达拷  */



    .redpackets_rule_mask_wrap {
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 999;
        background: rgba(85,85,85,.7);
        top: 0;
        left: 0;
    }
    .redpackets_rule_mask {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        -webkit-transform: translate3d(-50%,-50%,0);
        width: 86%;
        border-radius: 0.2rem;
        font-size: 0.12rem;
        color: #fff;
        background: #f93f49;
        z-index: 9999;
    }
    .redpackets_rule_mask .rule_close_btn {
        height: 0.16rem;
        width: 0.16rem;
        position: fixed;
        top: 0;
        right: 0;
        padding: 0.1rem;
    }
    .redpackets_rule_mask .rule_close_btn::before,.rule_close_btn::after {
        display: block;
        content: '';
        position: absolute;
        top: 0.18rem;
        right:0.18rem;
        width: 0.14rem;
        height: 1px;
        background: #fff;
        transform-origin: center;
        -webkit-transform-origin: center;
    }
    .redpackets_rule_mask .rule_close_btn::before {
        transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
    }
    .redpackets_rule_mask .rule_close_btn::after {
        transform: rotateZ(135deg);
        -webkit-transform: rotateZ(135deg);
    }
    .redpackets_rule_mask .rule_content {
        padding: 0 0.2rem 0.2rem 0.2rem;
    }
    .redpackets_rule_mask h2 {
        font-size: 0.14rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.4rem;
        border-bottom: 1px dashed #c63038;
        margin-bottom: 0.1rem;
        position: relative;
    }
    .redpackets_rule_mask h2::after,.redpackets_rule_mask h2::before {
        display: block;
        content: '';
        height: 0.07rem;
        width: 0.1rem;
        background: rgba(255,255,255,1);
        border-radius:  50% / 100% 100% 0 0;
        position: absolute;
        bottom: -0.05rem;
    }
    .redpackets_rule_mask h2::after {
        left: -0.02rem;
        transform: rotate(90deg);
    }
    .redpackets_rule_mask h2::before {
        right: -1px;
        transform: rotate(-90deg);
    }
    .redpackets_rule_mask .rule_content > p:nth-of-type(1) {
        font-weight: bold;
        margin-bottom: 0.06rem;
    }
    .redpackets_rule_mask .rult_item {
        position: relative;
        margin: 0.04rem 0;
    }
    .redpackets_rule_mask .rult_item_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 0.76rem;
        text-align: left;
    }
    .redpackets_rule_mask .rult_item_cont {
        margin-left: 0.76rem;
        text-align: justify;
    }

</style>
<template>
    <div class="page-redpack" v-if="!!time.first_time">
        <div class="redpack-banner"><img src="https://img.alicdn.com/imgextra/i2/1876943437/TB2uJuLnYlmpuFjSZFlXXbdQXXa_!!1876943437.jpg"><a class="redpack-ruleBtn" @click="maskShow=true"  data-cnzz="查看活动规则">活动规则></a></div>
        <ul class="redpack-time">
            <li :class="{active:tab==1}" @click="changeTab(1);" @click.prevent="cnzz('tab1')">
                <a href="javascript:;" data-tabhref="?c=redpack&tab=1">
                    <span>{{time.first_time.time}}</span>
                    <span v-if="time.first_time.tab_type==3">已结束</span>
                    <span v-if="time.first_time.tab_type==2">正在进行</span>
                    <span v-if="time.first_time.tab_type==1">即将开始</span>
                </a>
            </li>
            <li :class="{active:tab==2}" @click="changeTab(2);" @click.prevent="cnzz('tab2')">
                <a href="javascript:;" data-tabhref="?c=redpack&tab=2">
                    <span>{{time.second_time.time}}</span>
                    <span v-if="time.second_time.tab_type==3">已结束</span>
                    <span v-if="time.second_time.tab_type==2">正在进行</span>
                    <span v-if="time.second_time.tab_type==1">即将开始</span>
                </a>
            </li>
            <li :class="{active:tab==3}" @click="changeTab(3);" @click.prevent="cnzz('tab3')">
                <a href="javascript:;" data-tabhref="?c=redpack&tab=3">
                    <span>{{time.thred_time.time}}</span>
                    <span v-if="time.thred_time.tab_type==3">已结束</span>
                    <span v-if="time.thred_time.tab_type==2">正在进行</span>
                    <span v-if="time.thred_time.tab_type==1">即将开始</span>
                </a>
            </li>
        </ul>
        <div class="redpack-countdown">
            距离下场开始<span class="h_t">0</span><span class="h_n">0</span>:<span class="m_t">0</span><span class="m_n">0</span>:<span class="s_t">0</span><span class="s_n">0</span>
        </div>

        <div class="redpack-container" id="redpack-free">
            <template v-if="!!allData">
                <div v-for="item in allData" class="free_redpackets" :class="{mask_cantBuy:item.canBuy==3}" >
                    <div class="free_redpackets_wrap">
                        <div class="redpackets_top">
                            <span class="top_title">[免费抢]</span>
                            <span class="top_number">总需人次：{{item.totalNum}}人</span>
                        </div>
                        <div class="redpackets_main">
                            <div class="left"></div>
                            <div class="right">
                                <div class="right_wrap">
                                    <span class="main_price nowrap">{{item.true_price}}元</span>
                                    <span class="main_title nowrap">微信红包</span>
                                    <div class="main_jindu">
                                        <p class="txt">开奖进度<strong style="color: #f93f49">{{(item.currentNum*100/item.totalNum).toFixed(2)}}%</strong></p>
                                        <p class="wrap">
                                            <span class="bar" :style="{width:(item.currentNum*100/item.totalNum).toFixed(2)+'%'}"><i class="color"></i></span>
                                        </p>
                                    </div>
                                    <a v-if="item.canBuy==2" :class="{mask_cantBuy:item.canBuy!=2}" class="main_btn buyBtn_theme_2" >即将开抢 ></a>

                                    <a v-if="item.canBuy==1" :class="{mask_cantBuy:item.canBuy!=1}"
                                       class="main_btn buyBtn_theme_1"
                                       v-link="{path:'/detail',query:{id:item.shopid}}" data-cnzz="立即参与|{{item.shopid}}">立即参与 ></a>

                                    <a v-if="item.canBuy==3" :class="{mask_cantBuy:item.canBuy!=3}" class="main_btn buyBtn_theme_3" >已抢光 ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div v-else class="w-more" id="recordListMore">暂无商品</div>
        </div>


        <!--  rule_mask  -->

        <div class="redpackets_rule_mask_wrap" v-if="maskShow===true" @click="maskShow=false">
            <div class="redpackets_rule_mask">
                <span class="rule_close_btn" data-cnzz="关闭活动规则" @click="maskShow=false"></span>   <!--关闭按钮-->
                <h2>活动规则</h2>
                <section class="rule_content">
                    <p>此活动为“众联拼宝”平台感恩回馈，每天3个时段免费开抢</p>
                    <div class="rult_item">
                        <span class="rult_item_title">1.活动时间：</span>
                        <p class="rult_item_cont">
                            0元拼宝专场内商品分3场开启，开场时间为10时、14时、20时三个时段；
                        </p>
                    </div>
                    <div class="rult_item">
                        <span class="rult_item_title">2.活动资格：</span>
                        <p class="rult_item_cont">
                            凡当天在线支付过任意金额消费的用户均可免费参与当天的0元拼宝，每名用户每时段限参与1次；
                        </p>
                    </div>
                    <div class="rult_item">
                        <span class="rult_item_title">3.特别声明：</span>
                        <p class="rult_item_cont">
                            若发现用户在活动中使用不正当手段参与，活动方有权取消其参与资格；
                        </p>
                    </div>
                    <div class="rult_item">
                        <span class="rult_item_title">4.奖励发放：</span>
                        <p class="rult_item_cont">
                            中奖结果将通过公众号推送，请留意<b>关注众联拼宝</b>公众号，否则将无法收到奖励；
                </p>
                    </div>
                    <p>*免费专区所有商品全部为免费，只拼手速拼人品，不要钱！ </p>
                </section>
            </div>
        </div>

    </div>

</template>
<script>
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    import Swiper from '../libs/swiper.min'
    import pop from '../components/pop'
    import WeiXin from '../libs/wxShare'

    module.exports = {
        watch:{
            async tab(n,o){

                if(o!==''){

                    let goods = await Request.get(Config.apiDomain + '/index/getFreeGoods?s_type='+this.tab);

                    if(goods.status==200 && !!goods.data){
                        this.allData = goods.data
                    }

                }
            }
        },
        data() {
            return {
                apiDomain:Config.apiDomain,
                time:{},
                allData:{},
                tab: '',
                maskShow: false,
            }
        },
        components: {
            pop
        },
        created(){

            this.$dispatch('isLoading', true);

        },
        async ready() {
            let goods = await Request.get(Config.apiDomain + '/index/getFreeGoods');

            if(goods.status==200 && !!goods.data){
                this.allData = goods.data
                this.tab = goods.tab
                this.updateTime(goods.left_time)
            }

            let time = await Request.get(Config.apiDomain + '/index/getFreeTime');

            if(time.status==200 && !!time.data){
                this.time = time.data
            }

            //倒计时

            this.$dispatch('isLoading', false);
            Weixin.init(()=> {
                WeiXin.updateShare({
                    desc:'每天3场免费红包，最高可得330元',
                    imgUrl:'http://ww1.sinaimg.cn/mw690/006BEJyMgw1fag5tzhj13j30p00p0dil.jpg',
                    link:location.href,
                })
            });

        },
        beforeDestroy() {
            clearInterval(this.interval)
        },
        methods: {
            changeTab(index){
                console.log(index)
                this.tab===index ? null : this.tab=index
            },
            updateTime:function(t){
                this.interval=setInterval(function(){
                    var h=0;
                    var m=0;
                    var s=0;
                    if(t>=0){
                        h=Math.floor(t/60/60%24)+'';
                        m=Math.floor(t/60%60)+'';
                        s=Math.floor(t%60)+'';
                    }else{
                        window.location.reload()
                    }
                    t--;
                    $('.redpack-countdown .h_t').html(h.length>1?h.split('')[0]:0);
                    $('.redpack-countdown  .h_n').html(h.length>1?h.split('')[1]:h);
                    $('.redpack-countdown  .m_t').html(m.length>1?m.split('')[0]:0);
                    $('.redpack-countdown  .m_n').html(m.length>1?m.split('')[1]:m);
                    $('.redpack-countdown  .s_t').html(s.length>1?s.split('')[0]:0);
                    $('.redpack-countdown  .s_n').html(s.length>1?s.split('')[1]:s);
                },1000)
            }
        }
    }
</script>
